<template>
  <div>
    <span>Count</span>
    <p>当前的票房:{{ count }}</p>
    <p>主演: {{ actor }}</p>
    <p>双倍票房:{{ doubleCount }}</p>
    <p>电影个数:{{movieList.length}} </p>
    <div>
      <span>mutations的操作</span>
      <button @click="increment">累加count-封装操作</button>
      <button @click="incrementN({ n: 2 })">
        累加N -- count--封装方法操作
      </button>
    </div>

    <span>actions操作</span>
    <button @click="incrementWait">延迟1s累加</button>
    <button @click="incrementNWait({ n: 2 })">延迟1s累加n</button>
  </div>

</template>

<script>
import { mapGetters, mapState, mapMutations,mapActions } from 'vuex'
export default {
  computed: {
    ...mapState('Actor', ['actor']),
    ...mapState('Count', ['count']),
    ...mapState('Movie', ['movieList']),  
    ...mapGetters( "Count",['doubleCount'])
  },
  methods: {

    ...mapMutations( "Count", ['increment', 'incrementN']),

    ...mapActions("Count",["incrementNWait", "incrementWait"]),
  }
}
</script>

<style scoped>
span {
  color: #fc5531;
}
</style>